Google Tag Manager 使用教程
•
# Google Tag Manager 使用教程
## WTF GTM
[GTM](https://tagmanager.google.com) 是 Google 免费提供的标签管理器（Google 自己的翻译叫跟踪代码管理器），使用 GTM 可以一站式管理 Web 和 APP 中管理用于分析、营销等功能的代码段。
- 对开发人员来说只需要在代码中安装一次
- 对运营和营销人员，可以在线管理追踪工具无需麻烦研发
- GTM 非常灵活，有非常多的模板可以使用，在海外适配广泛
```mermaid
graph LR
A(dataLayer) -->|新数据| B{是否是Event}
B --> C(获取变量)
C --> D{Tag 配置的触发规则}
D --> |命中| E(执行 Tag 脚本)
```
## GTM 中的概念
### DataLayer 数据层
https://developers.google.com/tag-platform/tag-manager/datalayer
> 数据层是一个对象，供 Google 跟踪代码管理器和 gtag.js 用来将信息传递给代码。您可以通过数据层传递事件或变量，然后设置根据变量值进行触发的触发器。
```javascript
window.dataLayer = window.dataLayer || [];
// dataLayer item
{
event: "checkout_button",
gtm: {
uniqueEventId: 2,
start: 1639524976560,
scrollThreshold: 90,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "1_27"
},
value: "120"
}
```
简单来说，datalayer 就是 GTM 用来与用户代码之间互相传递数据的一个对象，数据主要是事件和变量。用户代码可以手动向 dataLayer 中 push 数据。
### Tags 标签
https://support.google.com/tagmanager/topic/3281056
Tag 是一段代码，由 Trigger 控制何时触发。比如安装 TikTok Pixel 代码，或在某个按钮点击时向 TikTok Pixel 发送某个事件。
> 当我们在 HTML 上下文中谈论 Tag 时，我们指的是 、 `<body>` 、 `<p>` 、 `<li>`、 `<blockquote>` 等标签。当我们提到分析和营销行业中使用的 Tag 时，我们指的是组织提供的代码，用于在您的网站或移动应用程序上安装所需的产品或功能。
### Variables 变量
https://support.google.com/tagmanager/topic/7683268
GTM 的变量可以是常量、自定义 JavaScript（动态获取）。GTM 有一些内置变量，比如 Click Classes、Click Element、Page URL 等，也可以用别人写好的 template。
- Trigger 中的变量用于定义筛选器，用于指定何时触发特定标记。
- Tags 中的变量用于捕获动态值。
例子，我们可以把 TikTok Pixel 的 ID 设置为常量，方便我们多次复用。也可以自己写一段脚本，返回一个动态的变量。
```javascript
// 获取 Event 触发时，Element 的 CSS 路径。
function() {
// Build a CSS path for the clicked element
var originalEl = {{Click Element}};
var el = originalEl;
if (el instanceof Node) {
// Build the list of elements along the path
var elList = [];
do {
if (el instanceof Element) {
var classString = el.classList ? [].slice.call(el.classList).join('.') : '';
var elementName = (el.tagName ? el.tagName.toLowerCase() : '') +
(classString ? '.' + classString : '') +
(el.id ? '#' + el.id : '');
if (elementName) elList.unshift(elementName);
}
el = el.parentNode
} while (el != null);
// Get the stringified element object name
var objString = originalEl.toString().match(/\[object (\w+)\]/);
var elementType = objString ? objString[1] : originalEl.toString();
var cssString = elList.join(' > ');
// Return the CSS path as a string, prefixed with the element object name
return cssString ? elementType + ': ' + cssString : elementType;
}
}
```
### Trigger 触发器
https://support.google.com/tagmanager/topic/7679384
触发器用于监听事件，并控制 Tag 何时被触发或阻止。
触发器可以配置监听的事件，以及根据变量配置筛选器。每个筛选器都由一个变量、一个运算符和一个值组成。
### Templates 模板
https://developers.google.com/tag-platform/tag-manager/templates
Template 是一段运行在沙盒中的自定义代码。有两种 Template，分别是 Tag Template 和 Variable Template。社区中有很多发布出来的模板可以使用。
官方文档中的自定义 Template 例子：
```javascript
// require relevant API
const sendPixel = require('sendPixel')
const encodeUriComponent = require('encodeUriComponent')
// capture values of template fields
const account = data.accountId
// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account)
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure)
```
## 注意项
### 事件的触发顺序
有些 Tag 触发可能需要有先后顺序，比如安装 TikTok Pixel 的 Tag 要由于 Page View Event 的上报，否则 Page View Event 上报时 TikTok Pixel 的代码可能还没有加载好，导致事件丢失。
可以通过设置 Tag 的执行优先级控制先后顺序。
### clickElement 无法匹配
https://www.simoahava.com/analytics/create-css-path-variable-for-click-element/
### 配合 terraform 使用
https://registry.terraform.io/providers/mirefly/google-tag-manager/latest
### 其它 Tag Manager
- [华为 TagManager](https://developer.huawei.com/consumer/cn/hms/huawei-dynamic-tag-manager)
- [Free Open Source Matomo Tag Manager](https://github.com/matomo-org/tag-manager)